
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Global API - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Lato|Inconsolata' rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
    <div class="list">
        <h2>Api</h2>
        <ul class="menu-root">
            
                <li><a href="/api/index.html" class="sidebar-link">Overview</a></li>
            
                <li><a href="/api/options.html" class="sidebar-link">Component Options</a></li>
            
                <li><a href="/api/instance-properties.html" class="sidebar-link">Instance Properties</a></li>
            
                <li><a href="/api/instance-methods.html" class="sidebar-link">Instance Methods</a></li>
            
                <li><a href="/api/global-api.html" class="sidebar-link current">Global API</a></li>
            
                <li><a href="/api/directives.html" class="sidebar-link">Directives</a></li>
            
                <li><a href="/api/filters.html" class="sidebar-link">Filters</a></li>
            
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <h1>Global API</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h3 id="Vue-config">Vue.config</h3><p><code>Vue.config</code> is an object containing Vue’s global settings. Here are the list of all the avaiable settings with their default values:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="comment">// print stack trace for warnings?</span></span><br><span class="line">  debug: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// attribute prefix for directives</span></span><br><span class="line">  prefix: <span class="string">'v-'</span>,</span><br><span class="line">  <span class="comment">// interpolation delimiters</span></span><br><span class="line">  <span class="comment">// for HTML interpolations, add</span></span><br><span class="line">  <span class="comment">// 1 extra outer-most character.</span></span><br><span class="line">  delimiters: [<span class="string">'&#123;&#123;'</span>, <span class="string">'&#125;&#125;'</span>],</span><br><span class="line">  <span class="comment">// suppress warnings?</span></span><br><span class="line">  silent: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">// interpolate mustache bindings?</span></span><br><span class="line">  interpolate: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// use async updates (for directives &amp; watchers)?</span></span><br><span class="line">  <span class="keyword">async</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// allow altering observed Array's prototype chain?</span></span><br><span class="line">  proto: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>You can modify them directly, for example:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.config.debug = <span class="literal">true</span> <span class="comment">// turn on debugging mode</span></span><br></pre></td></tr></table></figure>
<p><strong>Debug Mode</strong></p>
<p>When <code>Vue.config.debug</code> is set to true, Vue will automatically use synchronous mode and throw a <code>debugger</code> statement when there is a warning. This enables the user to inspect the full stack trace in browser dev tools.</p>
<p class="tip">debug mode is not available in the minified production builds.</p>

<p><strong>Changing Delimiters</strong></p>
<p>When the delimiters are set for text interpolation, the delimiters for HTML interpolation will be generated by adding one outer-most symbol on both sides:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Vue.config.delimiters = [<span class="string">'(%'</span>, <span class="string">'%)'</span>]</span><br><span class="line"><span class="comment">// tags now are (% %) for text</span></span><br><span class="line"><span class="comment">// and ((% %)) for HTML</span></span><br></pre></td></tr></table></figure>
<h3 id="Vue-extend(_options_)">Vue.extend( options )</h3><ul>
<li><strong>options</strong> <code>Object</code></li>
</ul>
<p>Create a “subclass” of the base Vue constructor. All <a href="/api/options.html">instantiation options</a> can be used here. The special cases to note here are <code>el</code> and <code>data</code>, which must be functions in this case.</p>
<p>Internally, <code>Vue.extend()</code> is called on all component options before instantiating the components. For more details regarding components, see <a href="/guide/components.html">Component System</a>.</p>
<p><strong>Example</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Profile = Vue.extend(&#123;</span><br><span class="line">  el: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">document</span>.createElement(<span class="string">'p'</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">'&#123;&#123;firstName&#125;&#125; &#123;&#123;lastName&#125;&#125; aka &#123;&#123;alias&#125;&#125;'</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> profile = <span class="keyword">new</span> Profile(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    firstName : <span class="string">'Walter'</span>,</span><br><span class="line">    lastName  : <span class="string">'White'</span>,</span><br><span class="line">    alias     : <span class="string">'Heisenberg'</span></span><br><span class="line">  &#125;  </span><br><span class="line">&#125;)</span><br><span class="line">profile.$appendTo(<span class="string">'body'</span>)</span><br></pre></td></tr></table></figure>
<p>Will result in:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">p</span>&gt;</span>Walter White aka Heisenberg<span class="tag">&lt;/<span class="title">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="Vue-directive(_id,_[definition]_)">Vue.directive( id, [definition] )</h3><ul>
<li><strong>id</strong> <code>String</code></li>
<li><strong>definition</strong> <code>Function</code> or <code>Object</code> <em>optional</em></li>
</ul>
<p>Register or retrieve a global custom directive. For more details see <a href="/guide/custom-directive.html">Writing Custom Directives</a>.</p>
<h3 id="Vue-filter(_id,_[definition]_)">Vue.filter( id, [definition] )</h3><ul>
<li><strong>id</strong> <code>String</code></li>
<li><strong>definition</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Register or retrieve a global custom filter. For more details see <a href="/guide/custom-filter.html">Writing Custom Filters</a>.</p>
<h3 id="Vue-component(_id,_[definition]_)">Vue.component( id, [definition] )</h3><ul>
<li><strong>id</strong> <code>String</code></li>
<li><strong>definition</strong> <code>Function Constructor</code> or <code>Object</code> <em>optional</em></li>
</ul>
<p>Register or retrieve a global component. For more details see <a href="/guide/components.html">Component System</a>.</p>
<h3 id="Vue-transition(_id,_[definition]_)">Vue.transition( id, [definition] )</h3><ul>
<li><strong>id</strong> <code>String</code></li>
<li><strong>definition</strong> <code>Object</code> <em>optional</em></li>
</ul>
<p>Register or retrieve a global JavaScript transition effect definition. For more details see the guide for <a href="/guide/transitions.html#JavaScript_Functions">JavaScript Transitions</a>.</p>
<h3 id="Vue-partial(_id,_[definition]_)">Vue.partial( id, [definition] )</h3><ul>
<li><strong>id</strong> <code>String</code></li>
<li><strong>definition</strong> <code>String | Node</code> <em>optional</em></li>
</ul>
<p>Register or retrieve a global partial. The definition can be a template string, a querySelector that starts with <code>#</code>, a DOM element (whose innerHTML will be used as the template string), or a DocumentFragment.</p>
<p><strong>Example</strong></p>
<p>HTML</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span></span><br><span class="line">  &#123;&#123;&gt; avatar&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>JavaScript</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Vue.partial(<span class="string">'avatar'</span>, <span class="string">'&lt;img v-attr="src:avatarURL"&gt;'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    avatarURL: <span class="string">'/images/avatar.jpg'</span></span><br><span class="line">  &#125;    </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>Will result in:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"/images/avatar.jpg"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="Vue-nextTick(_callback_)">Vue.nextTick( callback )</h3><ul>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>Vue.js batches view updates and executes them all asynchronously. It uses <code>MutationObserver</code> if available and falls back to <code>setTimeout(fn, 0)</code>. This method calls the callback after the next view update, which can be useful when you want to wait until the view has been updated.</p>
<h3 id="Vue-use(_plugin,_[args…]_)">Vue.use( plugin, [args…] )</h3><ul>
<li><strong>plugin</strong> <code>Object</code> or <code>Function</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>Mount a Vue.js plugin. If the plugin is an Object, it must have an <code>install</code> method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument. For more details, see <a href="/guide/extending.html#Extend_with_Plugins">Plugins</a>.</p>
<h3 id="Vue-util">Vue.util</h3><p>Exposes the internal <code>util</code> module, which contains a number of utility methods. This is intended for advanced plugin/directive authoring, so you will need to look at the source code to see what’s available.</p>

    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/vuejs/vuejs.org" target="_blank">Fork this site on Github</a>!</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        
    </body>
</html>